<template>
	<a-card>
		<div>
			<el-form :model="form" :inline="true" class="demo-form-inline">
				<el-form-item label="商品分类">
					<el-select v-model="form.cate_id" placeholder="请选择" clearable>
						<el-option v-for="item in goods_type" :key="item.values" :label="item.label"
							:value="item.values">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input style="width: 180px;" v-model="form.goods_name" clearable placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column prop="id" label="商品编号" width="180" />
				<el-table-column prop="title" label="商品名称" width="180" />
				<el-table-column prop="extension_title" label="推广名称" width="180" />
				<el-table-column prop="pact_type" label="租赁方式" />
				<el-table-column prop="stock" label="库存" />
				<el-table-column prop="create_time" label="创建时间" />
				<el-table-column prop="status_name" label="状态" />
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
						<el-button @click="handleShare(scope.row)" type="text" size="small">分享链接</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex align-center justify-end custom_page">
				<span class="total">共{{ pageTotal }}页</span>
				<span class="total">共{{ total }}条</span>
				<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize"
					:page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page"
					@current-change="handleCurrentChange" @size-change="handleSizeChange" />
			</div>
		</div>

		<share-dialog ref="shareDialog" :goods-id="goodsId"></share-dialog>
	</a-card>
</template>

<script>
	import {
		getGoodsAll,
		getCategory,
		getSecondCategory
	} from '@/api/goods'
	export default {
		name: 'BasicDetail',
		components: {
			shareDialog: () => import('./components/shareDialog')
		},
		data() {
			return {
				filterText: '',
				form: {
					cate_id: '',
					goods_name: ''
				},
				tableData: [],
				total: 0,
				goods_type: [],
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100],
				goodsId: 0,
			}
		},
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList(flag) {
				const {
					page,
					pageSize,
					cate_id,
					goods_name
				} = {
					page: this.page,
					pageSize: this.pageSize,
					cate_id: this.form.cate_id,
					goods_name: this.form.goods_name
				}
				if (!flag) {
					this.tableData = []
				}
				getGoodsAll({
					page,
					pageSize,
					cate_id,
					goods_name
				}).then(res => {
					this.tableData = res.data
					this.total = res.total
					console.log(res);
				})
				getCategory().then(res => {
					// this.goods_type = res || []
					console.log(res);
				})
				getSecondCategory(51).then(res => {
					res.forEach((item) => {
						this.goods_type.push({
							values: item.id,
							label: item.name
						})
					})
					console.log(this.goods_type);
				})
			},
			handleShare(item) {
				console.log(item);
				this.goodsId = item.id
				this.$refs.shareDialog.goodsId = this.goodsId
				this.$refs.shareDialog.dialogVisible = true
			},
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
			// 查询
			search() {
				this.page = 1
				this.getList()
			},
			// 重置
			reset() {
				this.form = {
					goodsType: '',
					goodsName: ''
				}
				this.getList()
			},
		}
	}
</script>

<style lang="less" scoped>
	.title {
		color: @title-color;
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 16px;
	}
</style>
